<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渲染函数</title>
  </head>
  <body>
    <div id="app">
      <button @click="add">加1</button>
      <my-child ref="child"></my-child>
    </div>
  </body>
  <script src="../lib/vue.global.js"></script>
  <script>
    const { h, ref } = Vue;
    const Child = {
      /*  写法1:
     template: `<div>child</div>`
     写法2:
     render () {
       return [
         h('div', 'child!')
       ]
     }*/
      // 写法3
      setup(props, { expose }) {
        const count = ref(10);

        const increment = () => {
          count.value += 1;
        };

        expose({
          increment,
        });

        // 返回一个函数  函数返回 渲染函数的结果
        return () => h("div", "child!!" + count.value);
      },
    };

    Vue.createApp({
      components: {
        MyChild: Child,
      },
      setup() {
        const child = ref();

        const add = () => {
          child.value.increment();
        };

        return {
          child,
          add,
        };
      },
    }).mount("#app");
  </script>
</html>
